<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
    }
  </style>
  <title>一个最简单的例子</title>
  <link rel="stylesheet" href="../library/ol/ol.css">
  <link rel="stylesheet" href="../css/common.css">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body>
  <form class="form-inline">
    <label>Action type &nbsp;</label>
    <select id="type" class="form-control">
      <option value="click" selected>Click</option>
      <option value="singleclick">Single-click</option>
      <option value="pointermove">Hover</option>
      <option value="altclick">Alt+Click</option>
      <option value="none">None</option>
    </select>
    <span id="status">&nbsp;0 selected features</span>
  </form>
  <div id="map" class="map"> </div>

  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script
    src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL">
  </script>
  <script src="../library/ol/ol-debug.js"></script>
  <script src="./js/common.js"></script>
  <script type="text/javascript">
    var raster = new ol.layer.Tile({
      source: new ol.source.OSM()
    });

    var vector = new ol.layer.Vector({
      source: new ol.source.Vector({
        url: './json/world.geojson',
        // url: './json/china.GeoJson',
        format: new ol.format.GeoJSON()
      })
    });

    var map = new ol.Map({
      layers: [raster, vector],
      target: 'map',
      view: new ol.View({
        center: [0, 0],
        zoom: 2
      })
    });

    var select = null; // ref to currently selected interaction

    // select interaction working on "singleclick"
    var selectSingleClick = new ol.interaction.Select();

    // select interaction working on "click"
    var selectClick = new ol.interaction.Select({
      condition: ol.events.condition.click
    });

    // select interaction working on "pointermove"
    var selectPointerMove = new ol.interaction.Select({
      condition: ol.events.condition.pointerMove
    });

    var selectAltClick = new ol.interaction.Select({
      condition: function (mapBrowserEvent) {
        return ol.events.condition.click(mapBrowserEvent) &&
          ol.events.condition.altKeyOnly(mapBrowserEvent);
      }
    });

    var selectElement = document.getElementById('type');

    var changeInteraction = function () {
      if (select !== null) {
        map.removeInteraction(select);
      }
      var value = selectElement.value;
      if (value == 'singleclick') {
        select = selectSingleClick;
      } else if (value == 'click') {
        select = selectClick;
      } else if (value == 'pointermove') {
        select = selectPointerMove;
      } else if (value == 'altclick') {
        select = selectAltClick;
      } else {
        select = null;
      }
      if (select !== null) {
        map.addInteraction(select);
        select.on('select', function (e) {
          document.getElementById('status').innerHTML = '&nbsp;' +
            e.target.getFeatures().getLength() +
            ' selected features (last operation selected ' + e.selected.length +
            ' and deselected ' + e.deselected.length + ' features)';
        });
      }
    };

    /**
     * onchange callback on the select element.
     */
    selectElement.onchange = changeInteraction;
    changeInteraction();
  </script>
</body>